<template>
  <div>
    <p v-if="uname==null" style="margin-top: 50px">
      未登录！
      <a href="/">点击返回 >></a>
    </p>
    <div v-else>
      <h1 id="title">实验进程管理功能界面</h1>
      <p>{{uname}}，欢迎使用！</p>
    </div>
    <center>
    <el-row>
      <el-col id="card" :span="8" v-for="(funcL, index) in permitted" :key="funcL" :offset="index > 0 ? 2 : 0">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="card_styles[funcL]['msrc']" class="image">
          <div style="padding: 12px;">
            <span>{{card_styles[funcL]["name"]}}</span>
            <div class="bottom clearfix">
              <el-button type="text" class="button" @click="toFunc(card_styles[funcL]['goto'])">进入 >></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    </center>
  </div>
</template>

<script>
import {get} from "@/utils/http";
import {ElMessage} from "element-plus";
import GLOBAL from "@/utils/global_variable"

export default {
  name: "MainPage",
  data(){
    return{
      uid: null,
      typeId: null,
      uname: null,
      funcList: ["booking_business", "experimental_business", "process_tracing", "step_management"],
      permission: {
        "booking_business": 0,
        "experimental_business": 0,
        "process_tracing": 0,
        "step_management": 0
      },
      permitted: [],
      card_styles: {
        "booking_business": {
          name: '实验预约业务',
          msrc: require('../assets/booking_business.png'),
          goto: 'BookingPage'
        },
        "experimental_business": {
          name: '实验追踪业务',
          msrc: require('../assets/experimental_business.png'),
          goto: 'ExpPage'
        },
        "process_tracing": {
          name: '进程追溯业务',
          msrc: require('../assets/process_tracing.png'),
          goto: 'ProcPage'
        },
        "step_management": {
          name: '步骤管理业务',
          msrc: require('../assets/step_management.png'),
          goto: 'AddStep'
        }
      }
    }
  },
  created() {
    this.uid = GLOBAL.params.uid;
    this.typeId = GLOBAL.params.typeId;
    this.uname = GLOBAL.params.uname;
    let _this = this;
    get('/login_jys_permission', {
      usertid: this.typeId
    }).then(function (res) {
      if (res.code === 1) {
        _this.permission = res.data
        for( var i in [0,1,2,3]) {
          if (_this.permission[_this.funcList[i]]){
            _this.permitted.push(_this.funcList[i])
          }
        }
      } else {
        ElMessage.warning({
          showClose: true,
          message: "权限查询失败",
          type: "warning",
          center: true
        })
      }

    })
  },
  methods: {
    toFunc(frameName){
      this.$router.push({
        name: frameName,
        params: {
          uid: this.uid
        }
      })
    }
  }
}

</script>

<style scoped>

#title {
}

#card {
  max-width: 22%;
  margin-left: 20px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>